<template>
  <nut-popup v-model:visible="state.show"  position="right" z-index="100" style="height: 100vh;width: 80vw;">
    <div style="padding: 10px;">
      <div class="wrap">
        <div :class="['item', state.activeStat===1?'active':'']" @click="choseStat(1)">待审核</div>
        <div :class="['item', state.activeStat===2?'active':'']" @click="choseStat(2)">已审核</div>
        <div :class="['item', state.activeStat===3?'active':'']" @click="choseStat(3)">部分收款</div>
        <div :class="['item', state.activeStat===4?'active':'']" @click="choseStat(4)">有欠款</div>
      </div>
      <nut-divider></nut-divider>

      <div class="wrap">
        <div :class="['item', state.activeDay===1?'active':'']" @click="choseDay(1)">今天</div>
        <div :class="['item', state.activeDay===2?'active':'']" @click="choseDay(2)">昨天</div>
        <div :class="['item', state.activeDay===3?'active':'']" @click="choseDay(3)">前天</div>
        <div :class="['item', state.activeDay===4?'active':'']" @click="choseDay(4)">本周</div>
        <div :class="['item', state.activeDay===5?'active':'']" @click="choseDay(5)">上周</div>
        <div :class="['item', state.activeDay===6?'active':'']" @click="choseDay(6)">本月</div>
        <div :class="['item', state.activeDay===7?'active':'']" @click="choseDay(7)">上月</div>
        <div :class="['item', state.activeDay===8?'active':'']" @click="choseDay(8)">本年</div>
      </div>
      <div style="margin-left: 10px;display: flex;margin-right: 10px;">
        <JPicker v-model="state.beginDate" />
        <div style="padding-top: 7px;">-</div>
        <JPicker v-model="state.endDate" />
      </div>
      <nut-divider></nut-divider>
      <div style="margin: 0 5px;">
        <JAuto v-model="state.salesName" placeholder="业务员" cat="admin"></JAuto>
        <div style="height: 10px;"></div>
        <JAuto v-model="state.buName" placeholder="客户" cat="customer"></JAuto>
        <div style="height: 10px;"></div>
        <JAuto v-model="state.invName" placeholder="商品" cat="goods"></JAuto>
      </div>
    </div>
    <div style="text-align: right;">

      <nut-button @click="reset" >重置</nut-button>
      <nut-button  style="margin-left: 50px;"   type="primary" @click="doSearch" >搜索</nut-button>
    </div>
  </nut-popup>

</template>
<script setup>
import tool from "@/utils/tool";
import JPicker from "@/components/JPicker.vue";
import {onMounted, reactive} from "vue";
import JAuto from "@/components/JAuto.vue";
const state = reactive({
  show: false,
  activeDay: 0,
  activeStat: 0,
  beginDate: '',
  endDate: '',
  sendList:[],
  salesName:'',
  invName: '',
  buName: '',
  checkAll: false,
  isIndeterminate: false,
  sends:[],
  checkedSends: [],
})
const emit = defineEmits(['doSearch'])
onMounted(() => {
  let usr = tool.data.getUser()
  state.salesName = usr.name
  tool.post('app/sendList').then(ret => {
    ret.data.map(row => {
      state.sendList.push(row.value)
    })
  })
})
const reset = () => {
  state.activeDay = 0
  state.activeStat = 0
  state.beginDate = ''
  state.endDate = ''
  let usr = tool.data.getUser()
  state.salesName = usr.name
  state.buName=''
  state.invName =''
}

const choseDay = (index) => {
  state.activeDay = index
  let beg = tool.getDay()
  let end = tool.getDay()
  if(index === 1) {
    beg =  tool.getDay()
    end =  tool.getDay()
  }
  if(index === 2) {
    beg =  tool.getDay('',-1)
    end =  tool.getDay('',-1)
  }
  if(index === 3) {
    beg =  tool.getDay('',-2)
    end =  tool.getDay('',-2)
  }
  if(index === 4) {
    beg =  tool.getDayStart('','beg',0,'week')
    end =  tool.getDay()
  }
  if(index === 5) {
    beg =  tool.getDayStart('','beg',-1,'week')
    end =  tool.getDayStart('','end',-1,'week')
  }
  if(index === 6) {
    beg =  tool.getDayStart('','beg',0,'month')
    end =  tool.getDay()
  }
  if(index === 7) {
    beg =  tool.getDayStart('','beg',-1,'month')
    end =  tool.getDayStart('','end',-1,'month')
  }
  if(index === 8) {
    beg =  tool.getDayStart('','beg',0,'year')
    end =  tool.getDay()
  }
  state.beginDate = beg
  state.endDate = end
}
const choseStat = (index) => {
  state.activeStat = index
}

const doSearch = () => {
  let model = {
    activeStat: state.activeStat,
    beginDate: state.beginDate,
    endDate: state.endDate,
    salesName: state.salesName,
    buName: state.buName,
    invName: state.invName,
  }
  state.show = false
  emit('doSearch', model)
}

const open = () => {
  state.show = true
}

defineExpose({open})

</script>


<style scoped lang="scss">
.pop {
  height: 100vh;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
  margin-right: 10px;
  .item {
    border: 1px solid gray;
    border-radius: 2px;
    padding: 5px 13px;
    margin-left: 10px;
    margin-bottom: 10px;
    &.active {
      background-color: #1e9fff;
      color: white;
    }
  }
}
</style>